
/*
  怀念袁隆平爷爷
  照片轮播
  风格化效果
*/

var drawLength = 250;
var noiseScale = 0.005;
var strokeLength = 35;

//轮播图组
var imgNames = ["test.png", "test2.png","test3.png"]; 
var imgs = [];
var imgIndex = -1;

var frame;


function preload() {
  // 懒加载
  for (let i = 0; i < imgNames.length; i++) {
    imgs.push(loadImage(imgNames[i]));
  }
}


function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  //设置文字标签
   img2 = loadImage("test4.png"); 
  changeImage();
}


function draw() {
   
  /*
  风格化风格示例代码——国外开源
  感谢
  作者 Jason Labbe
  网址 jasonlabbe3d.com*/
  
  if (frame > drawLength) {
    return;
  }

  let img = imgs[imgIndex];
 
  translate(
    width / 2 - img.width / 2,
    height / 2 - img.height / 2
  );
  
  let count = map(frame, 0, drawLength, 2, 80);
  
  for (let i = 0; i < count; i++) {
    let x = int(random(img.width))
    let y = int(random(img.height))
 
    let index = (y * img.width + x) * 4;
  
    //颜色设定
    let r = img.pixels[index];
    let g = img.pixels[index + 1];
    let b = img.pixels[index + 2];
    let a = img.pixels[index + 3];
    
    stroke(r, g, b, a);//三通道和阿尔法
    let sw = map(frame, 0, drawLength, 25, 0);
    strokeWeight(sw);
    
    push();
      translate(x, y);
      let n = noise(x * noiseScale, y * noiseScale);
      rotate(radians(map(n, 0, 1, -180, 180)));

      let lengthVariation = random(0.75, 1.25);
      line(0, 0, strokeLength * lengthVariation, 0);

      // 绘制风格元素
      stroke(min(r * 3, 255), min(g * 3, 255), min(b * 3, 255), random(100));
      strokeWeight(sw * 0.8);
      line(0, -sw * 0.15, strokeLength * lengthVariation, -sw * 0.15);
    pop();
  }
    
  frame++;
  //图像左上角显示纪念标签
 image(img2, -20, -50, 200, 100);  
 
}


function changeImage() {
  background(255);
   
  frame = 0;
  
  noiseSeed(int(random(1000)));
 
  imgIndex++;
  if (imgIndex >= imgNames.length) {
    
  
    imgIndex = 0;
  }
   
  
  imgs[imgIndex].loadPixels();

}


function mousePressed() {
  changeImage();
}


//按键盘保存照片截图
function keyPressed() {
  saveCanvas("noiseFieldPainter", "jpg");
}
